
@import '../app/variables.css';

:root {
  --float-animation-distance: 100px;
}

.accountList {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  max-width: 750px;
  margin: 0 auto;
}

.edit {
  display: flex;
  flex-direction: row-reverse;
  cursor: pointer;
  color: var(--color-primary-standard);
  max-width: 750px;
  font-weight: 600;
  margin: 0 auto;
  font-size: 16px;
  margin-bottom: 20px;
}

.back {
  cursor: pointer;
  color: var(--color-primary-standard);
  max-width: 750px;
  font-weight: 600;
  margin-top: 40px;
  font-size: 16px;
}

.title {
  text-align: center;

  & h2 {
    font-size: 40px;
  }
}

.loading {
  position: absolute;
  left: 32%;
  top: 200px;
}

@keyframes float {
  0% {
    margin-top: 0px;
    margin-bottom: var(--float-animation-distance);
  }

  20% {
    margin-top: 0px;
    margin-bottom: var(--float-animation-distance);
  }

  50% {
    margin-top: var(--float-animation-distance);
    margin-bottom: 0px;
  }

  60% {
    margin-top: var(--float-animation-distance);
    margin-bottom: 0px;
  }

  100% {
    margin-top: 0px;
    margin-bottom: var(--float-animation-distance);
  }
}

/* stylelint-disable */
@for $i from 1 to 4 {
  .cube-$i {
    animation: float 2000ms 0.5ms infinite ease-in;
    animation-delay: calc($i * 0.2)s;
    z-index: calc(5 - $i);
    position: absolute;

    & img {
      margin-left: calc(70px * $i);
      margin-top: calc(200px - (40 * $i));
    }
  }
}
